<template>
  <div class="question">
    <!-- 头部 -->
    <div class="question-header m-center">
      <div class="question-search">
        <img src="https://www.imooc.com/static/img/wenda/wenda-logo.png" alt="">
      </div>
    </div>

    <!-- 列表部分 -->
    <div class="m-center">
      <div class="question-content-container">
        <div class="left">
          <div class="question-list">
            <ul>
              <li class="question-item">
                <div class="content-box">
                  <h3 class="title">
                    {{ questionDetail.title }}
                  </h3>
                  <p class="tag" style="margin-top: 20px">
                    <span style="float: right;margin-left: 35px">{{ questionDetail.gmtCreate }}</span>
                    <span style="float: right">{{ `提问者：` +questionDetail.userName }}</span>
                  </p>
                  <!-- 提问内容 -->
                  <div v-html="questionDetail.content" class="tinymce-container">

                  </div>
                </div>
              </li>
            </ul>
          </div>

          <!-- 回答列表 -->
          <Comment :userId = questionDetail.userId></Comment>

        </div>



        <div class="right">
          <!-- 点击数和回答数 -->
          <SideBar :question="questionDetail" @answer="answer"/>
          <h3 style="margin: 30px 0px 10px 0px; font-weight: 700">相关问题推荐</h3>
          <!-- 相关问题推荐 -->
          <Recommend :recommend="recommendList"/>
        </div>

      </div>
    </div>

    <!-- 问答回复表单 -->
    <CommentForm
       ref="commentForm"
       :questionId="this.$route.params.questionId"
       @onSaveSuccess="answerSuccess"/>

  </div>
</template>
<script>
import { getQuestionDetailById,getRecommendQuestion } from '@/api/question'
import { mapGetters } from 'vuex';
import CommentForm from '@/pages/question/comment-form'

export default {
  data () {
    return {
      questionId: '',
      questionDetail: {},
      recommendList:[]
    }
  },
  mounted () {
    this.getQuestionDetail()
    this.getRecommendList()
  },
  methods: {
    getQuestionDetail(){
      this.questionId = this.$route.params.questionId
      getQuestionDetailById(this.questionId).then(result => {
        let { code, data } = result
        if (code === 20000) {
          if (data.item !== null){
            this.questionDetail = data.item
            const regex = new RegExp('<img', 'gi')
            this.questionDetail.content = this.questionDetail.content.replace(regex, `<img style="max-width: 100%; height: auto"`)
          }
          else {
            this.$router.push('/404')
          }
        }
      })
    },
    getRecommendList(){
      this.questionId = this.$route.params.questionId
      getRecommendQuestion(this.questionId).then(result => {
        let { code, data } = result
        if (code === 20000) {
          this.recommendList = data.items
        }
      })
    },
    //路由改变触发事件
    fetchData(){
      this.getQuestionDetail()
      this.getRecommendList()
    },

    //子组件发表回复
    answer(){
      this.$refs.commentForm.open()
    },

    //发表回复成功
    answerSuccess(){
      // 重载页面
      window.location.reload()
    }
  },
  components:{
    SideBar: () => import('@/pages/question/question-detail-side'),
    Recommend: () => import('@/pages/question/question-detail-recommend'),
    Comment: () => import('@/pages/question/question-detail-comment'),
    CommentForm
  },
  watch: {
    '$route': 'fetchData'
  },
  computed: {
    ...mapGetters({
      'userId': 'id'
    })
  },
}
</script>
<style lang="stylus" scoped>
  @import '~assets/stylus/variables.styl';
  .question
    padding: 20px 0 50px;
    .question-header
      .question-search
        position: relative;
        padding-right: 75px;
        background-color: #fff;
        border-bottom: 1px solid rgba(7,17,27,0.1);
        & > img
          width: 300px;
          height: 60px;
    .question-content-container
      display: flex;
      align-items: flex-start;
      margin-top: 30px;
      .left
        flex: 1;
        .question-list
          padding: 28px 32px;
          background-color: #fff;
          border-radius: 12px;
          box-shadow: 0 4px 8px 2px rgba(7,17,27,.1)
          .question-item
            display: flex;
            align-items: center;
            padding: 12px 0;
            border-bottom: 1px solid rgba(7,17,27,0.1);
            &:last-child
              border-bottom: none;
            .finish-green
              flex: 0 0 40px;
              width: 40px;
              padding: 8px 0;
              margin-right: 15px;
              background-color: rgba(31,173,78,.1);
              color: #1fad4e;
              & > span
                display: block;
                text-align: center;
                line-height: 18px;
                font-size: 16px;
                font-weight: 700;
                margin-top 3px;
                &:last-child
                  font-weight: 400;
                  font-size: 14px;
            .finish-white
              flex: 0 0 40px;
              width: 40px;
              padding: 8px 0;
              margin-right: 15px;
              color: #1fad4e;
              & > span
                display: block;
                text-align: center;
                line-height: 18px;
                font-size: 16px;
                font-weight: 700;
                margin-top 3px;
                &:last-child
                  font-weight: 400;
                  font-size: 14px;
            .content-box
              flex: 1;
              .title
                margin-bottom: 4px;
                font-size: 22px;
                color: $font-first-color;
                font-weight: 700;
                line-height: 24px;
                &:hover
                  color: #1fad4e;
              .tag
                font-size: 12px;
                color: $font-four-color;
                & > img
                  display: inline-block;
                  vertical-align: middle;
                  margin-top: -2px;
                  width: 16px;
                  height: 16px;
                  border-radius: 50%;
                & > span
                  display: inline-block;
                  vertical-align: middle;
                  &.name
                    padding: 0 10px 0 0px;
                  &.view-box
                    padding-left: 10px;
                    & > i, & > span
                      display: inline-block;
                      vertical-align: middle;
        .list-empty
          padding: 10px 0;
          text-align: center;
          font-size: 14px;
          color: #1fad4e;
      .right
        margin-left: 30px;
        flex: 0 0 280px;
        width: 280px;
    .tinymce-container {
      margin-top: 50px;
      max-width 100%
    }
</style>
